import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const ConsultationChart = () => {
  const chartRef = useRef(null);
  const myChart = useRef(null);

  useEffect(() => {
    // 初始化图表
    if (chartRef.current) {
      myChart.current = echarts.init(chartRef.current);
      initChart();
    }

    // 组件卸载时销毁图表
    return () => {
      if (myChart.current) {
        myChart.current.dispose();
      }
    };
  }, []);

  const initChart = () => {
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' },
        backgroundColor: 'rgba(6, 33, 68, 0.9)',
        borderColor: '#24bbec',
        textStyle: {
          color: '#fff',
        },
        formatter: function (params) {
          const phone = params[0];
          const text = params[1];
          const ai = params[2];

          const total = phone.value + text.value + ai.value;
          const phonePercent = Math.round((phone.value / total) * 100) || 0;
          const textPercent = Math.round((text.value / total) * 100) || 0;
          const aiPercent = Math.round((ai.value / total) * 100) || 0;

          return `${phone.name}<br/>
                    ${phone.marker}${phone.seriesName}: <span style="color:#1d6fa0;font-weight:bold">${phone.value} (${phonePercent}%)</span><br/>
                    ${text.marker}${text.seriesName}: <span style="color:#24bbec;font-weight:bold">${text.value} (${textPercent}%)</span><br/>
                    ${ai.marker}${ai.seriesName}: <span style="color:#ffc640;font-weight:bold">${ai.value} (${aiPercent}%)</span><br/>
                    <b>总量: ${total}</b>`;
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        top: '8%',
        bottom: '15%',
        containLabel: true,
      },
      xAxis: {
        type: 'category',
        data: ['0时', '4时', '8时', '12时', '16时', '20时', '24时'],
        axisLine: { lineStyle: { color: '#5d96c1' } },
        axisLabel: {
          color: '#a2d3e8',
          fontSize: 12,
        }
      },
      yAxis: {
        type: 'value',
        name: '咨询量',
        nameTextStyle: {
          color: '#a2d3e8',
          fontSize: 12,
        },
        axisLine: { lineStyle: { color: '#5d96c1' } },
        splitLine: { lineStyle: { color: 'rgba(93, 150, 193, 0.2)' } },
        axisLabel: { color: '#a2d3e8', fontSize: 12 }
      },
      series: [
        {
          name: '电话咨询',
          type: 'bar',
          stack: 'total',
          data: [120, 200, 150, 80, 70, 110, 130],
          itemStyle: { color: '#1d6fa0' }
        },
        {
          name: '文字咨询',
          type: 'bar',
          stack: 'total',
          data: [80, 120, 90, 50, 40, 70, 80],
          itemStyle: { color: '#24bbec' }
        },
        {
          name: '智能客服',
          type: 'bar',
          stack: 'total',
          data: [30, 50, 40, 20, 15, 30, 35],
          itemStyle: { color: '#ffc640' }
        }
      ]
    };

    if (myChart.current) {
      myChart.current.setOption(option);
    }
  };

  return (
    <div style={{ width: '100%', height: '100%' }}>
      <div 
        ref={chartRef} 
        style={{ width: '100%', height: '100%' }}
      ></div>
    </div>
  );
};

export default ConsultationChart;